<template>
  <div v-loading="loading">
    <instance-search v-model="params" :range-text="[$t('webAuto.StartInitiation'), $t('webAuto.StartEndTime')]" keyword-text="发起人、流程名称" />
    <el-table :data="dataList" :header-cell-style="{ background: '#e8e8e8' }" style="width: 100%; margin: 20px 0" @row-dblclick="showProcess">
      <el-table-column fixed prop="processDefName"  :label="$t('webAuto.ProcessType')" show-overflow-tooltip>
        <template v-slot="scope">
          <el-tag size="small" type="success" v-if="scope.row.superInstanceId !== scope.row.instanceId">{{ $t('webAuto.son') }}</el-tag>
          <span style="margin-left: 5px">{{ scope.row.processDefName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="businessKey" :label="$t('webAuto.RequestNo')" min-width="110px"></el-table-column>
      <el-table-column prop="instanceId" :label="$t('webAuto.LCInstanceNumber')" min-width="130px"></el-table-column>
      <el-table-column prop="formAbstracts" show-overflow-tooltip :label="$t('webAuto.summaryInformation')" min-width="110px">
        <template v-slot="scope">
          <form-abstracts :value="scope.row.formAbstracts" />
        </template>
      </el-table-column>
      <el-table-column prop="staterUser" show-overflow-tooltip :label="$t('webAuto.promoter')" min-width="100px">
        <template v-slot="scope">
          <w-avatar :size="35" :name="scope.row.staterUser.name" :src="scope.row.staterUser.avatar" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="startTime" :label="$t('webAuto.SubmissionTime')" min-width="120px"></el-table-column>
      <el-table-column show-overflow-tooltip prop="finishTime" :label="$t('webAuto.EndTime')" min-width="120px"></el-table-column>
      <el-table-column show-overflow-tooltip prop="taskName" :label="$t('webAuto.currentNode')">
        <template v-slot="scope">{{ $t(scope.row.taskName) }}</template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('webAuto.ApprovalStatus')">
        <template v-slot="scope">
          <el-tag :type="getProcTag(scope.row.result) || 'primary'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="duration" :label="$t('webAuto.AlreadyConsuming')" min-width="120px">
        <template v-slot="scope">
          {{ getDuration(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('webAuto.operate')"  min-width="auto">
        <template v-slot="scope">
          <!-- <el-button circle type="primary" size="small" :title="' 查看'" @click="showProcess(scope.row)">
            <el-icon><View /></el-icon>
          </el-button> -->
          <el-button type="danger" size="small" :title="$t('webAuto.delete')" circle @click="deleteClick(scope.row)">
            <el-icon>
              <Delete />
            </el-icon>
          </el-button>
          <el-button type="primary" size="small" circle v-if="scope.row.status === '审批通过'"  :title="$t('webAuto.NodeIntervention')" plain @click="nodeInterClick(scope.row)" style="font-size:14px;border-color: transparent;background:0 0;color:#1989fa">干预</el-button>
          <el-button type="primary" size="small" circle v-if="scope.row.status === '审批进行中'"  :title="$t('webAuto.ProcessInvalidation')" plain @click="processNullify(scope.row)" style="font-size:14px;border-color: transparent;background:0 0;color:#ee0a24">作废</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <el-pagination hide-on-single-page background layout="prev, pager, next" :total="total"
        :page-size="params.pageSize" v-model:current-page="params.pageNo"></el-pagination>
    </div>
    <el-dialog  :title="$t('webAuto.ApprovalDetails')" v-model="processVisible" style="height: auto;min-height:100%;;width: 100%;margin:0!important;" >
      <instance-preview v-if="processVisible" :instance-id="selectInstance" :node-id="nodeId" 
        @handler-after="handlerAfter" :graphics="'instances'"></instance-preview>
    </el-dialog>
  </div>
</template>

<script>
import taskApi, {deleteProcessInstance} from '@/api/processTask'
import moment from 'moment'
import InstancePreview from '../workspace/approval/ProcessInstancePreview2.vue'
import { getProcTag } from "@/utils/ProcessUtil.js";
import FormAbstracts from "../workspace/oa/FormAbstracts.vue";
import InstanceSearch from "../common/InstanceSearch.vue";
import { Check, Delete, Edit, Message, Search, Star, } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'ProcessInstancePreview',
  components: { InstancePreview, FormAbstracts, InstanceSearch },
  data() {
    return {
      total: 0,
      params: {
        pageSize: 10,
        pageNo: 1,
        finished: null,
        code: '',
        startTimes: []
      },
      selectInstance: '',
      nodeId:'',
      loading: false,
      processVisible: false,
      formList: [],
      dataList: [],
    }
  },
  mounted() {
    this.getSubmittedList()
  },
  computed: {
    isMobile() {
      return window.screen.width < 450
    },
  },
  methods: {
    getProcTag,
    getSubmittedList() {
      this.loading = true
      const params = Object.assign({}, this.params)
      params.startTimes = String(params.startTimes)
      taskApi.getSubmittedList(params).then((rsp) => {
        this.loading = false
        this.total = rsp.data.total
        this.dataList = rsp.data.records
      }).catch((e) => {
        this.loading = false
      })
    },
    showProcess(row) {
      this.processVisible = true
      this.selectInstance = row.instanceId
      this.nodeId = row.nodeId
    },
    getDuration(row) {
      let end = this.$isNotEmpty(row.finishTime)
        ? row.finishTime
        : moment().format('YYYY-MM-DD HH:mm:ss')
      return this.$timeCoverStr(row.startTime, end)
    },
    handlerAfter() {
      this.processVisible = false
      this.getSubmittedList()
    },
    // 删除流程实例
    deleteClick(row) {
      console.log(row)
      ElMessageBox.alert(this.$t('webAuto.confirmProcess'), this.$t('webAuto.DeleteProcess'), {
            confirmButtonText: this.$t('webAuto.sure'),
            callback: action => {
                if (action === 'confirm') {
                    // 在用户确认后发送自定义接口请求
                    taskApi.getTaskDeletes(row.instanceId).then(res => {
                        ElMessage.success(this.$t('webAuto.DeleteSuccessfully'))
                        this.getSubmittedList()
                        // window.location.reload()
                    }).catch(err => {
                        ElMessage.error(this.$t('webAuto.DeleteFailed'))
                    })
                }
            }
        })
    },
    // 流程干预
    nodeInterClick(row) {
      console.log(row)
      ElMessageBox.alert('请确认是否需要干预选择的流程', '干预流程', {
            confirmButtonText: '确定',
            callback: action => {
                if (action === 'confirm') {
                    // 在用户确认后发送自定义接口请求
                    taskApi.updateHistoryProcessStatus(row.instanceId).then(res => {
                        ElMessage.success('干预流程成功')
                        // return
                        this.getSubmittedList()
                    }).catch(err => {
                        ElMessage.error('干预流程失败')
                    })
                }
            }
        })
    },
    // 流程作废
    processNullify(row){
        console.log(row)
        ElMessageBox.alert('请确认是否需要作废此流程', '作废流程', {
            confirmButtonText: '确定',
            callback: action => {
                if (action === 'confirm') {
                    // 在用户确认后发送自定义接口请求
                    taskApi.deleteProcessInstance(row.instanceId).then(res => {
                        ElMessage.success('作废流程成功')
                        this.getSubmittedList()
                    }).catch(err => {
                        ElMessage.error('作废流程失败')
                    })
                }
            }
        })
    }
  },
  watch: {
    params: {
      deep: true,
      handler() {
        this.getSubmittedList()
      },
    },
  },
}
</script>

<style scoped></style>
